<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		省份：<select name="" id="sf" onclick="sf()">
			<option value="-1">请选择省份</option>
		</select>
		城市：<select name="" id="cs" onclick="cs()">
			<option value="-1">请选择城市</option>
		</select>
		区县：<select name="" id="qx" onclick="qx()">
			<option value="-1">请选择区县</option>
		</select>
		<br>
		你选择的结果为：<label id="selectValue"></label>
	</body>
	<script type="text/javascript">
		var cs=['福建省','湖南省','四川省'];
		cs.push('四川省')
		var sf = 
		[
			['福州市','龙岩市'],
			['长沙市','岳阳市'],
			['绵阳市','成都市'],
		];
		var qx =
		[
			[['仓山区','晋安区']],
			[['新罗区','永定区']],
			[['天心区','芙蓉区']],
			[['云溪区','君山区']],
			[['游仙区','安州区']],
			[['锦江区','双流区']],
		];
		function sf(){
			var csobj = document.getElementById('cs');
			var sfobj = document.getElementById("sf");
			csobj.innerHTML=`<option value="-1">请选择城市</option>`;
			if(sfObj.value==-1){
				return;
			}
			var city = cs[provinceObj.value];			
			for(var i=0;i<city.length;i++){
				csObj.innerHTML+=`<option value="`+i+`">`+cs[i]+`</option>`;
			}
		}
				
		function cs(){
					var cityObj = document.getElementById('cs');
					var conObj = document.getElementById('qx')
					conObj.innerHTML = `<option value="-1">请选择区县</option>`;
					if(cityObj.value == -1){
						return;
					}
					var qx = qx[cityObj.value];
					for(var i = 0; i < country.length;i++){
						conObj.innerHTML += `<option value="`+ i +`">`+country[cityObj.value][i]+`</option>`;
					}
				}
				
		function qx(){
					var provinceObj = document.getElementById('sf');
					var cityObj = document.getElementById('cs');
					var conObj = document.getElementById('qx');
					var provinceName = sf[provinceObj.value];
					var cityName = cs[provinceObj.value][cityObj.value];
					var conName = qx[provinceObj.value][cityObj.value][conObj.value];
					var selectObj = document.getElementById('selectValue');
					selectObj.innerText = provinceName+": "+cityName+":"+conName;
				}
		onload = function(){
			var proObj = document.getElementById('sf');
			for(var i = 0; i < provinces.length ; i++){
			proObj.innerHTML += `<option value="`+i+`">` + provinces[i] + `</option>`;
					}
				}
	</script>
</html>
